<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Signin Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
    <style >
        body{
            background: url("https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/nanfen/bg2.jpg");
            color: #ffffff;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //页面加载，绑定单击事件
        $(function () {
            $("#btn").click(function(){
                console.log("文本框的值",$('#te').val())
                //发送ajax请求
                $.ajax({
                    //编写json格式，设置属性和值
                    url:"/send?email="+ $('#te').val(),
                    //发送信息至服务器是内容编码类型
                    contentType:"application/json;charset=UTF-8",
                    //发送到服务器的数据
                    // data:'{"email":'+ $('#te').val()+'}',
                    //预期服务器返回的数据类型
                    dataType:"json",
                    //请求方式:默认是GET
                    type:"get",
                    //请求成功后回调的函数
                    success:function(data){
                        console.log("响应成功")
                        //data服务器端响应的json的数据，进行解析：接收解析返回的json字符串
                        console.log(data)
                        document.getElementById("msg").innerHTML=data.msg;
                    }
                });
            });
        });
    </script>
</head>
<body>
<div>
    <div>
        <h2>欢迎注册南风后台</h2>
        <p id="msg" style="color: red" th:text="${msg}"></p>
    </div>
    <div>
        <form action="/sendEmail" method="post" name="form1">
            <div class="form-group">
                <label for="exampleInputEmail1">账户</label>
                <input type="text" class="form-control" name="username" id="exampleInputEmail1" placeholder="请输入账户">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" name="password" id="exampleInputPassword1" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">邮箱</label>
                <input type="email" class="form-control" id="te" name="email"  placeholder="请输入邮箱">
            </div>
            <div class="form-group" style="display: flex;">
                <div>
                    <label for="exampleInputPassword1">验证码</label>
                    <input type="text"   class="form-control" name="code"  placeholder="请输入验证码"/>
                </div>
                <div style="padding-top: 25px;margin-left: 5px">
                    <button id="btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <a >发送验证码</a>
                    </button>
                </div>
            </div>
            <button type="submit" class="btn btn-primary" style="width: 100%">立即注册</button>
        </form>
    </div>
</div>
</body>
</html>